{% extends 'layout/manage.html' %}
{% load static %}
{% block title %}{% endblock %}

{% block css %}
    <style>
        .thumbnail {
            padding: 0;
            border-radius: 5%;
            margin-bottom: 0;
        }
    .cycle{
        display: inline-block;
        height: 20px;
        width: 20px;
        {#border: 1px solid black;#}
        border-radius: 50%;
    }
    [name='color']{
        display: none;
    }
    .c1{
        border: 2px solid black;
    }
    </style>
    <link rel="stylesheet" href="{% static 'css/error.css' %}">
{% endblock %}

{% block content %}
    <!-- 控制弹框的按钮 -->
    <div>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
            <i class="fa fa-plus-circle" aria-hidden="true"></i> 新建项目
        </button>
    </div>

    <div class="panel panel-default" style="margin-top: 10px;">
        <div class="panel-heading"><i class="fa fa-star"></i> 星标</div>
        <div class="panel-body">
            <div class="row">
                {% for start_pro in project_dict.star %}
                <div class="col-sm-3 col-md-2">
                    <div class="thumbnail">
                        <a href="{% url 'dashboard' start_pro.value.id %}">
                            <div style="height: 100px;line-height:100px;text-align:center;background-color: {{ start_pro.value.get_color_display }};border-top-right-radius: 5%;border-top-left-radius: 5%">
                                {{ start_pro.value.name }}
                            </div>
                        </a>
                        <div class="caption" style="padding: 6px;">
                            <p class="clearfix" style="margin-bottom: 0;">
                    <span class="pull-left">
                        <a href="{% url 'project_unstar' start_pro.type start_pro.value.id %}">
                            <i class="fa fa-star" style="color:orange;"></i>

                        </a>

                      <span class="creator">{{ start_pro.value.creator.username }}</span>
                    </span>

                     <span class="pull-right">
                        <i class="fa fa-user-o"></i>
                        <span class="count">{{ start_pro.value.join_count }}</span>
                    </span>

                            </p>
                        </div>
                    </div>
                </div>
                {% endfor %}

            </div>
        </div>
    </div>

    <div class="panel panel-default" style="margin-top: 10px;">
        <div class="panel-heading"><i class="fa fa-list" aria-hidden="true"></i> 我创建的</div>
        <div class="panel-body">
            <div class="row">
                {% for start_pro in project_dict.my %}
                <div class="col-sm-3 col-md-2">
                    <div class="thumbnail">
                        <div style="height: 100px;line-height:100px;text-align:center;background-color: {{ start_pro.get_color_display }};border-top-right-radius: 5%;border-top-left-radius: 5%">
                            {{ start_pro.name }}
                        </div>
                        <div class="caption" style="padding: 6px;">
                            <p class="clearfix" style="margin-bottom: 0;">
                    <span class="pull-left">
                      <a href="{% url 'project_star' 'my' start_pro.id %}">
                          <i class="fa fa-star" style="color:lightgray;"></i>
                      </a>
                      <span class="creator">{{ start_pro.creator.username }}</span>
                    </span>

                     <span class="pull-right">
                        <i class="fa fa-user-o"></i>
                        <span class="count">{{ start_pro.join_count }}</span>
                    </span>

                            </p>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="panel panel-default" style="margin-top: 10px;">
        <div class="panel-heading"><i class="fa fa-snowflake-o" aria-hidden="true"></i> 我参与的</div>
        <div class="panel-body">
            <div class="row">
                {% for start_pro in project_dict.join %}
                <div class="col-sm-3 col-md-2">
                    <div class="thumbnail">
                        <div style="height: 100px;line-height:100px;text-align:center;background-color: {{ start_pro.get_color_display }};border-top-right-radius: 5%;border-top-left-radius: 5%">
                            {{ start_pro.name }}
                        </div>
                        <div class="caption" style="padding: 6px;">
                            <p class="clearfix" style="margin-bottom: 0;">
                    <span class="pull-left">
                      <a href="{% url 'project_star' 'join' start_pro.id %}">
                          <i class="fa fa-star" style="color:lightgray;"></i>
                      </a>
                      <span class="creator">{{ start_pro.creator.username }}</span>
                    </span>

                     <span class="pull-right">
                        <i class="fa fa-user-o"></i>
                        <span class="count">{{ start_pro.join_count }}</span>
                    </span>

                            </p>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- 弹框主体部分 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">添加项目</h4>
                </div>
                <div class="modal-body">
                    <form id="addform">
                        {% for field in form %}
                        {% csrf_token %}
                        <div class="form-group">
                            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                            {{ field }}
                            <span class="error_msg"></span>
                        </div>
                        {% endfor %}


                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button id="btnsubmit" type="button" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}
    <script>

        $(function () {
            bindSubmit();
            changeColor();
        });
        function bindSubmit() {

            $('#btnsubmit').click(function () {
                var data = $('#addform').serialize();
                $.ajax({
                    url:'{% url "project_list" %}',
                    type:'post',
                    data:data,
                    success:function (res) {
                        if (res.status){
                            // 刷新页面
                            location.reload();
                        }else {
                            for (var key in res.error_msg){
                                $('#id_' + key).next().text(res.error_msg[key][0])
                            }
                        }
                    }


                })



            })
        }


        // 添加项目选择颜色
        function changeColor() {
            $('.cycle').click(function () {
                $(this).addClass('c1').parent().siblings().find('.cycle').removeClass('c1');


            })
        }

    </script>


{% endblock %}

